<template>
  <div v-if="dataList" class="content-wrapper">
    <div class="content-header">
      <span v-if="dataList[0].flowType == 1">新增流程</span>
      <span v-if="dataList[0].flowType == 2">修订流程</span>
      <span v-if="dataList[0].flowType == 3">作废流程</span>
      <span v-if="dataList[0].flowType == 4">下载流程</span>
      <span>({{ $route.query.row.phaseName }})</span>
    </div>

    <div class="content-container">
      <div class="filter-container" />
      <div class="block-box">
        <div class="block-left">
          <div class="block">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>基本信息</span>
              </div>
              <el-form>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="文件名称">
                      {{ dataList[0].documentName
                      }}{{ dataList[0].fileExtension }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="文件编号">
                      <i>{{ dataList[0].documentCode }}</i>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="dataList[0].documentVersion" :span="8">
                    <el-form-item label="版本号">
                      {{ dataList[0].documentVersion }}
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col v-if="dataList[0].level" :span="8">
                    <el-form-item label="文件等级">
                      {{ dataList[0].level }}
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="文件属性">
                      {{ dataList[0].documentProperty }}
                    </el-form-item></el-col>
                  <el-col :span="8">
                    <el-form-item label="紧急程度">
                      {{ dataList[0].urgent == 0 ? '正常' : '紧急' }}
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col v-if="dataList.length > 1" :span="18">
                    <el-form-item label="文件模板">
                      {{ dataList[1].documentName
                      }}{{ dataList[1].fileExtension }}
                    </el-form-item></el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>流程信息</span>
              </div>
              <el-table
                :data="dataList"
                :show-header="false"
                style="width: 100%"
              >
                <el-table-column width="100px">
                  <template slot-scope="{ row }">
                    <el-tag v-if="row.result === 1" type="success">{{
                      row.phaseName
                    }}</el-tag>
                    <el-tag v-if="row.result === 2" type="danger">{{
                      row.phaseName
                    }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="handleUserName"
                  width="150px"
                />
                <el-table-column prop="opinion" />
                <el-table-column
                  prop="createTime"
                  width="160px"
                />
              </el-table>
            </el-card>
            <el-card
              v-if="dataList[dataList.length - 1].phase == 'release'"
              class="box-card"
              shadow="hover"
            >
              <template>
                <div slot="header" class="clearfix">
                  <span>签收情况</span>
                </div>
                <el-table
                  v-if="tableData"
                  :data="tableData"
                  style="width: 100%"
                  :row-key="keys"
                  :tree-props="{
                    children: 'userResponses',
                    hasChildren: true
                  }"
                >
                  <el-table-column prop="label" label="签收人" />
                  <el-table-column prop="signForStatus" label="签收情况">
                    <template slot-scope="{ row }">
                      <el-tag
                        v-if="row.signForStatus == 0"
                        size="mini"
                        type="danger"
                      >未签收</el-tag>
                      <el-tag
                        v-if="row.signForStatus == 1"
                        size="mini"
                        type="success"
                      >已签收</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, set } from '@/utils/db'
import {
  nodesHandle,
  getPhase,
  getFlow,
  getPhaseSmall,
  releaseCheck
} from '@/api/xd/documentFlow'

export default {
  data() {
    return {
      dataList: [{ flowType: '' }],
      id: '',
      tableData: [],
      i: 0
    }
  },
  watch: {
    dataList(data) {
      this.signCondition()
    }
  },
  mounted() {
    this.data()
  },
  updated() {},
  methods: {
    async data() {
      this.id = this.$route.query.row.documentFlowId
      if (!this.id) {
        this.id = JSON.parse(get('PreviewId'))
      }
      const data = await nodesHandle({
        documentFlowId: this.id
      })
      this.dataList = data.data || []
      set('PreviewId', JSON.stringify(this.id))
    },

    dispose() {
      const row = this.$route.query.row
      if (row.flowType == 1 || row.flowType == 2) {
        this.$router.push({
          path: getFlow(row.flowType) + row.documentFlowId,
          query: {
            phase: getPhase(row.phase)
          }
        })
      } else {
        this.$router.push({
          path: getFlow(row.flowType) + row.documentFlowId,
          query: {
            phase: getPhaseSmall(row.phase)
          }
        })
      }
    },
    async signCondition() {
      if (this.dataList[this.dataList.length - 1].phase == 'release') {
        const { data } = await releaseCheck({
          documentFlowId: this.dataList[0].documentFlowId
        })
        const tableDataList = [...data.groupResponses, ...data.userResponses]
        tableDataList.forEach((item, index) => {
          if (item.userResponses == null && item.signForStatus == null) {
            delete item.userResponses
          }
        })
        this.keysList(tableDataList)
        this.tableData = tableDataList
      }
    },
    keys(row) {
      // console.log(index)
      return row.keys
    },
    // 遍历keys
    keysList(data) {
      data.forEach((item, index) => {
        this.i++
        item.keys = this.i
        if (item.userResponses) {
          this.keysList(item.userResponses)
        }
      })
    }
  }
}
</script>

<style lang="scss" scope >
.block-left {
  height: 80vh;
  overflow-y: auto;
  .el-timeline-me {
    width: 60vw;
    .el-card__body {
      padding: 20px;
    }
  }
}
.block-right {
  padding-left: 50px;
}
.el-table {
  height: auto;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 96%;
  margin: 0 0 20px 0;
}
</style>
